<template>

  <div class="container">

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">网站信息管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">健驰资源池</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="nav">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          label="部门资源池"
          name="2"
        >
      </el-tab-pane>
        <el-tab-pane label="健驰资源池" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <el-collapse-transition>
      <div class="inquiry" v-show="!show3">
        <div class="header">
          <span>查询数据</span>
          <p @click="show3 = true">收起</p>
        </div>
        <el-form
          :inline="true"
          ref="form"
          :model="queryForm"
          label-width=""
          size="mini"
        >
          <el-form-item label="资源信息">
            <el-input
              placeholder="请输入客户手机号码/姓名"
              v-model="queryForm.info"
            ></el-input>
          </el-form-item>

          

          <div class="selectDate">
            <span>资源时间</span>
            <div class="picker">
              <el-date-picker
                v-model="date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
                @input="immediUpdate"
              >
              </el-date-picker>
            </div>
          </div>

          <div class="selectDate">
            <span>转移时间</span>
            <div class="picker">
              <el-date-picker
                v-model="assigedate"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <!-- @input="immediUpdate" -->
            </div>
          </div>

      
          <el-form-item>
            <el-button type="primary" @click="searchEvent()">搜索</el-button>
            <!-- v-on:keyup.enter="searchEvent" -->
            <el-button plain @click="reset" :loading="loading">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <div class="btn">
      <div>
        
        <p
          class="onekey"
          v-show="parArray.indexOf('metastasisDepa') != -1 && activeName == '2'"
          @click="metastasis"
        >
          <span>转移健驰共享池</span>
        </p>
      </div>
      <el-button
        size="mini"
        type="primary"
        @click="show3 = false"
        v-show="show3"
        >搜索展开</el-button
      >
    </div>

    <div class="table">
      <vxe-table
        ref="table"
        row-id="id"
        :data="tableData.list"
        style="width: 100%"
        align="center"
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
      >
        >
        <vxe-table-column type="checkbox" width="40"></vxe-table-column>
        <vxe-table-column
          type="seq"
          title="序号"
          min-width="50"
        ></vxe-table-column>
        <vxe-table-column
          field="batchNumber"
          title="批次"
          min-width="50"
        ></vxe-table-column>
        <vxe-table-column
          field="resourceId"
          title="资源ID"
          min-width="80"
        ></vxe-table-column>

        <vxe-table-column title="资源时间" show-overflow min-width="150">
          <template slot-scope="scope">
            <p v-if="!is_null(scope.row.createdTime)">
              {{ scope.row.createdTime }}
            </p>
            <p v-else>--</p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="客户姓名/电话" min-width="150" show-overflow>
          <template slot-scope="scope">
            <span
              :style="{
                fontWeight: scope.row.feedback && (scope.row.feedback)!='{}' ? 'bold' : '',
                color: scope.row.feedback && (scope.row.feedback)!='{}' ? '#409eff' : '',
              }"
              >{{ scope.row.customerName }}</span
            >
            <p
              style="cursor: pointer"
              :style="{
                fontWeight: scope.row.feedback && (scope.row.feedback)!='{}' ? 'bold' : '',
                color: scope.row.feedback && (scope.row.feedback)!='{}' ? '#409eff' : '',
              }"
              @click="
                $copyText(scope.row.customerPhone).then(
                  function (e) {
                    $message({
                      type: 'success',
                      message: '成功复制手机号',
                    });
                  },
                  function (e) {
                    $message({
                      type: 'warning',
                      message: '复制失败',
                    });
                  }
                )
              "
            >
              {{ scope.row.customerPhone }}
            </p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="客户信息" show-overflow min-width="120">
          <template slot-scope="scope">
            <p v-if="!is_null(scope.row.customerMessage)">
              {{ scope.row.customerMessage }}
            </p>
            <p v-else>--</p>
          </template>
        </vxe-table-column>

      
        <vxe-table-column
          title="渠道"
          show-overflow
          min-width="100"
          v-if="salesAuthorityId != '1'"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sourceFrom }}</span>
          </template>
        </vxe-table-column>

      

      <vxe-table-column
          title="渠道号"
          prop="channelName"
          min-width="150"
        ></vxe-table-column>

        <vxe-table-column
          title="分配团队"
          prop="assignorTeamName"
          min-width="150"
        ></vxe-table-column>

         <vxe-table-column
          title="分配客服"
          prop="assignorName"
          min-width="150"
        ></vxe-table-column>

     
        <vxe-table-column
          title="转移时间"
          show-overflow
          min-width="150"
        >
          <template slot-scope="scope">
            <p v-if="!is_null(scope.row.updatedTime)">
              {{ scope.row.updatedTime }}
            </p>
            <p v-else>--</p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="操作" min-width="200" fixed="right">
          <template slot-scope="scope">
        


            <p
              class="operation"
              v-if="parArray.indexOf('jcckCode') != -1"
              @click="copyInfo(scope.row)"
            >
              复制
            </p>

           
            
            <p
              class="operation"
              @click="progressShow(scope.row)"
              v-if="parArray.indexOf('progressCode') != -1"
            >
              跟进
            </p>
         
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <!-- 分页end -->
    <div style="height: 40px"></div>
    <div class="page" v-if="tableData.totalNum >= 1">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- @close="progressClose" -->
    <el-dialog
      :visible.sync="progress"
      :append-to-body="true"
      title="跟进情况"
      :before-close="progressClose"
    >
      <p style="margin-bottom: 15px; color: #666" v-if="lastFeedbackTime">
        最近更新：{{ lastFeedbackTime }}
      </p>
      <!-- <el-checkbox-group v-model="progressVal"> -->
      <el-checkbox
        true-label="1"
        false-label="0"
        class="haveTo"
        v-model="checkedForm.checked1"
        label="接通"
      ></el-checkbox>
      <el-checkbox
        true-label="1"
        false-label="0"
        class="haveTo"
        v-model="checkedForm.checked2"
        label="无法接通/无人接听/拒接"
      ></el-checkbox>
      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked3"
        label="接通不是本人"
        class="haveTo"
      ></el-checkbox>

      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked13"
        label="空号/停机/暂停服务"
        class="haveTo"
      ></el-checkbox>

      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked4"
        label="电话沟通完添加微信"
      ></el-checkbox>
      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked5"
        label="直接搜索手机号添加"
      ></el-checkbox>
      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked6"
        label="有意向/正常走流程"
      ></el-checkbox>
      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked7"
        label="添加完不说话"
      ></el-checkbox>

      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked8"
        label="添加完拉黑"
      ></el-checkbox>

      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked9"
        label="二十岁以下"
      ></el-checkbox>

      <el-checkbox
        true-label="1"
        false-label="0"
        v-model="checkedForm.checked10"
        label="秒杀"
      ></el-checkbox>
      <div class="checkbox">
        <el-input
          type="number"
          v-model="checkedForm.checked11"
          placeholder="请输入秒杀金额"
          size="mini"
        />
        <span>秒杀金额</span>
      </div>

      <div class="checkbox">
        <el-input
          type="textarea"
          autosize
          v-model="checkedForm.checked12"
          placeholder="请输入备注"
          size="mini"
        />
        <span>备注</span>
      </div>

      <!--分割线 -->
      <el-divider></el-divider>

       <div>
       <template>

          <el-table
            :data="logs"
            style="width: 100%"
            max-height="250">
            <el-table-column
              prop="userName"
              label="客服"
              width="300">
            </el-table-column>
            <el-table-column
              prop="context"
              label="进度"
              width="300">
            </el-table-column>
            <el-table-column
              prop="createdTime"
              label="时间">
            </el-table-column>
          </el-table>
      </template>
      </div>

      <!-- </el-checkbox-group> -->

      <div slot="footer" class="footer">
        <el-button size="mini" type="primary" @click="progreeSubmit()"
          >确定</el-button
        >
        <el-button size="mini" @click="progress = false">取消</el-button>
      </div>
    </el-dialog>

  
  </div>
</template>

<script>
export default {
  data() {
    return {
      guideId: "",
      date: "",
      assigedate: "",
      queryForm: {
        info: "",
        sourceFrom: "",
        assignorId: "",
        orgName: "",
        addedWx: false,
        dealDone: false,
      },
      loading: false,
      currentPage1: 1,
      pageSize: 10,
      tableData: [],
      logs:[],
      fileList: [],
      line: [],
      customer: [],
      allocationList: [],
      limits: "",
      parArray: [],
      height: "500px",
      activeName: "2",
      leadingInLive: false,
      show3: false,
      progress: false,
      progressVal: [], //复选框值
      checkedForm: {
        checked1: 0,
        checked2: 0,
        checked3: 0,
        checked4: 0,
        checked5: 0,
        checked6: 0,
        checked7: 0,
        checked8: 0,
        checked9: 0,
        checked10: 0,
        checked11: 0,
        checked12: "",
        checked13: 0,
      },
      progressId: "", //列表id
      channel: [],
      channeSel: [],
      keyvalue: "",
      multipleSelection: [],
      salesAuthorityId: "",
      kfShow: false, //批量分配客服判断
      moreService: "", //批量分配客服值
      options: [],
      lastFeedbackTime: "",
    };
  },
  created() {
    this.department();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "jcGuideCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });

    if (
      this.parArray.indexOf("wfpCode") == -1 &&
      this.parArray.indexOf("fpsbCode") == -1
    ) {
      this.activeName = "2";
    }

    this.salesAuthorityId = JSON.parse(
      sessionStorage.getItem("salesAuthorityId")
    );

    this.axiosList();
    this.channelAxios();
    this.customerlist();
    this.allocation();
    this.channelSource();
  },
  activated() {
    this.axiosList();
    this.channelAxios();
    this.customerlist();
    this.allocation();
    this.channelSource();
  },
  methods: {

     load () {
        this.logs.length += 2
      },
   
    copyInfo(row) {
      // console.log(row);
      let that = this;
      let inline = this.line.find((res) => res.id == row.channelId);
      let info =
        "姓名：" +
        row.customerName +
        "\n 电话：" +
        row.customerPhone +
        "\n 渠道：" +
        inline.name +
        ",资源时间：" +
        /\d{4}-\d{1,2}-\d{1,2}/g.exec(row.createdTime);
      that.$copyText(info).then(
        function (e) {
          that.$message({
            type: "success",
            message: "复制成功",
          });
        },
        function (e) {
          that.$message({
            type: "warning",
            message: "复制失败",
          });
        }
      );
    },
    //转移部门共享池
  metastasis(){
      this.$msgbox({
              title: "提示",
              message: "确定转移这些数据吗",
              confirmButtonText: "确定",
              cancelButtonText: "取消",
            })
              .then((res) => {
                let request ={
                   ids : this.multipleSelection.map((i) => i.id), 
                   publicType :  "3"
                }
                this.axios
                  .post(
                    "/order/wsCustomerChannelUser/metastasis",request
                  )
                  .then((res) => {
                    //   console.log(res);
                    if (res.code == 0) {
                      this.$message.success(res.data);
                      this.axiosList();
                    } else {
                      this.$message.warning(res.message);
                    }
                  });
              })
              .catch(() => {});
  },
    // 导出
    wsexport() {
      this.axios
        .post("/order/wsCustomerChannelUser/export", {
          assignEndTime: this.assigedate
            ? this.assigedate[1] + " 23:59:59"
            : "",
          assignStartTime: this.assigedate
            ? this.assigedate[0] + " 00:00:00"
            : "",
          keyWord: this.queryForm.info,
          sourceFrom: this.queryForm.sourceFrom,
          startTime: this.date ? this.date[0] + " 00:00:00" : "",
          endTime: this.date ? this.date[1] + " 23:59:59" : "",
          assignStatus: this.activeName,
          status: "A",
          assignTeam: this.queryForm.orgName[this.queryForm.orgName.length - 1],
          assignId: this.queryForm.assignorId,
          addedWx: this.queryForm.addedWx,
          dealDone: this.queryForm.dealDone,
        })
        .then((res) => {
          if (res.code == 0) {
            this.downloadlink(res.data);
          } else {
            this.$message.error(res.message);
          }
        });
    },
    progressShow(row) {
      this.progressId = row.id;
      this.lastFeedbackTime = row.lastFeedbackTime;
      this.progress = true;
      let feedback = "";
      if (row.feedback) {
        feedback = JSON.parse(row.feedback);
      }

      this.axios
        .get("/order/wsCustomerChannelUser/getFeedbackLog?id=" + row.id)
        .then((res) => {
          if (res.code == 0) {
           this.logs=res.data
          } else {
            this.$message.warning(res.message);
          }
        });
      
      if (feedback) {
        this.checkedForm = {
          checked1: feedback["接通"],
          checked2: feedback["无法接通/无人接听/拒接"],
          checked3: feedback["接通不是本人"],
          checked4: feedback["电话沟通完添加微信"],
          checked5: feedback["直接搜索手机号添加"],
          checked6: feedback["有意向/正常走流程"],
          checked7: feedback["添加完不说话"],
          checked8: feedback["添加完拉黑"],
          checked9: feedback["二十岁以下"],
          checked10: feedback["秒杀"],
          checked11: feedback["秒杀金额"],
          checked12: row.comment,
          checked13: feedback["空号/停机/暂停服务"],
        };
      } else {
        this.checkedForm = {
          checked1: 0,
          checked2: 0,
          checked3: 0,
          checked4: 0,
          checked5: 0,
          checked6: 0,
          checked7: 0,
          checked8: 0,
          checked9: 0,
          checked10: 0,
          checked11: 0,
          checked12: "",
          checked13: 0,
        };
      }
    },
    // 进度提交
    progreeSubmit() {
      let objPro = {
        接通: this.checkedForm.checked1,
        "无法接通/无人接听/拒接": this.checkedForm.checked2,
        接通不是本人: this.checkedForm.checked3,
        电话沟通完添加微信: this.checkedForm.checked4,
        直接搜索手机号添加: this.checkedForm.checked5,
        "有意向/正常走流程": this.checkedForm.checked6,
        添加完不说话: this.checkedForm.checked7,
        添加完拉黑: this.checkedForm.checked8,
        二十岁以下: this.checkedForm.checked9,
        秒杀: this.checkedForm.checked10,
        秒杀金额: this.checkedForm.checked11,
        "空号/停机/暂停服务": this.checkedForm.checked13,
      };
      if (
        this.checkedForm.checked1 == 0 &&
        this.checkedForm.checked2 == 0 &&
        this.checkedForm.checked3 == 0 &&
        this.checkedForm.checked13 == 0
      ) {
        this.$message.warning("蓝色字体选项必须其一");
        return false;
      }
      this.axios
        .post("/order/wsCustomerChannelUser/feedback", {
          feedback: objPro,
          id: this.progressId,
          comment: this.checkedForm.checked12,
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("提交成功");
            this.axiosList();
            this.progress = false;

            this.checkedForm = {
              checked1: 0,
              checked2: 0,
              checked3: 0,
              checked4: 0,
              checked5: 0,
              checked6: 0,
              checked7: 0,
              checked8: 0,
              checked9: 0,
              checked10: 0,
              checked11: 0,
              checked12: "",
              checked13: 0,
            };
          } else {
            this.$message.error(res.message);
          }
        });
    },

    
    

    // 导入数据请求
    // 一键导入
    templateMode() {
      this.$refs.tops.clearFiles();
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 120000,
      };
      this.axios
        .post(
          "/order/wsCustomerChannelUser/one/key/oneKeyImportToWs",
          this.logFile1,
          config
        )
        .then((res) => {
          //   console.log(res);
          if (res.code == 0) {
            this.guideId = ""; //清空模板下拉框
            this.$alert(
              "导入成功的数量: " +
                res.data.successNumber +
                "条, " +
                "导入失败的数量: " +
                res.data.errorNumber +
                "条",
              "提示",
              {
                confirmButtonText: "确定",
               
              }
              
            );
             
            if (res.data.errorUrl) {
              let url = this.ImgHttps + res.data.errorUrl; //创建下载链接
              let link = document.createElement("a"); //创建a标签
              link.style.display = "none"; //将a标签隐藏
              link.href = url; //给a标签添加下载链接
              link.setAttribute("download", "统一模板"); // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
              document.body.appendChild(link);
              link.click(); //执行a标签
            }
            this.axiosList();
            this.getUnassignedCount();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    },
    // 部门选择列表
    department() {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },

    reset: _.debounce(function () {
      this.loading = true;
      this.date = "";
      this.assigedate = "";
      this.queryForm = {
        info: "",
        sourceFrom: "",
        assignId: "",
        orgName: "",
        addedWx: "",
        dealDone: "",
      };
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.axiosList("1");
    }, 300),

    searchEvent: _.debounce(function () {
      this.currentPage1 = 1;
      // this.pageSize = 10;
      this.axiosList("1");
    }, 300),

    handleClick(val) {
      this.activeName = val.name;
      this.date = "";
      this.queryForm = {
        info: "",
        sourceFrom: "",
        assignorId: "",
        orgName: [],
      };
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.axiosList();
    },
   
  
    
    //*** 数据列表 ***//
    axiosList() {
      let beginTime = "";
      let endTime = "";

      if (!this.is_null(this.date)) {
        beginTime = this.date[0] + " 00:00:00";
        endTime = this.date[1] + " 23:59:59";
      }

      let assigedate_begin = "";
      let assigedate_end = "";

      if (!this.is_null(this.assigedate)) {
        assigedate_begin = this.assigedate[0] + " 00:00:00";
        assigedate_end = this.assigedate[1] + " 23:59:59";
      }

      this.axios
        .post("/order/wsCustomerChannelUser/page", {
          assignStatus: 1, 
          publicType :this.activeName,
          endTime: endTime,
          keyWord: this.queryForm.info,
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          startTime: beginTime,
          sourceFrom: this.queryForm.sourceFrom, //平台名字
          status: "A",
          assignId: this.queryForm.assignorId,
          assignStartTime: assigedate_begin,
          assignEndTime: assigedate_end,
          assignTeam: this.queryForm.orgName[this.queryForm.orgName.length - 1],
          addedWx: this.queryForm.addedWx,
          dealDone: this.queryForm.dealDone,
        })
        .then((res) => {
          this.loading = false;
          this.guideId = ""; //清空模板下拉框
          // this.$refs.tops.clearFiles();
          if (res.code == 0) {
            for (let i in res.data.list) {
              res.data.list[i].switchVal = false;
            }
            this.tableData = res.data;

            if (this.multipleSelection) {
              this.$nextTick(() => {
                this.multipleSelection.forEach((v, i) => {
                  this.tableData.list.forEach((_v, _i) => {
                    if (v.id === _v.id) {
                      this.$refs.table.setCheckboxRow(_v, true);
                    }
                  });
                });
              });
            }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //*** 数据列表 ***//
    //*** 渠道&&客服数据列表 ***//
    channelAxios() {
      this.axios
        .get(
          "/order/comm/customeruser/selectCustomerditch?salesAuthorityId=1",
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.line = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 分配状态
    allocation() {
      this.axios
        .get("/sys/v1/common/by/group?groupId=assign_status", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log('分配状态')
          // //console.log(res);;
          if (res.code == 0) {
            this.allocationList = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 客户下拉框数据
    customerlist() {
      this.axios
        .get("/sys/v1/user/employee/by/sales/authority?salesAuthorityId=1", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            // let array=[];
            const array = res.data.filter(
              (item) => item.salesAuthorityId === "1"
            );
            this.customer = array;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //*** 渠道&客服数据列表 ***//

    // 多选
    selectAllEvent({ checked, records }) {
      this.multipleSelection = records;
    },
    selectChangeEvent({ checked, records }) {
      this.multipleSelection = records;
      console.log(this.multipleSelection);
    },

    is_null(content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
    tosee(row) {
      this.$router.push({
        name: "jcGuideDetail",
        query: {
          id: row.id,
          name: "guide",
        },
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.axiosList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.axiosList();
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.nav {
  margin-bottom: 10px;
  /deep/.el-tabs__nav-scroll {
    background: #fff;
  }
  /deep/.el-tabs__item {
    width: 100px;
    text-align: center;
    padding: 0;
  }
}

.btn {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  > div {
    display: flex;
    justify-content: flex-start;
  }
  & ::placeholder {
    color: #fff;
    font-size: 10px;
  }

  /deep/.el-input__inner {
    width: 110px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #409eff;
    color: #fff;
  }
  /deep/.el-input__icon {
    height: 30px;
    line-height: 30px;
    color: #fff;
  }
  .onekey {
    margin-left: 15px;
    width: 100px;
    text-align: center;
    height: 29px;
    line-height: 25px;
    background: #409eff;
    border-radius: 4px;
    img {
      width: 15px;
      height: 15px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      color: #fff;
    }
  }
  .onekey:hover {
    cursor: pointer;
  }
  p {
    font-size: 14px;
  }
}

/deep/.el-tabs__header {
  margin: 0;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: top;
  span {
    font-size: 15px;
    color: #000;
    padding-bottom: 10px;
  }
  p {
    color: #4168e7;
    font-size: 10px;
  }
  p:hover {
    cursor: pointer;
  }
}

.el-form {
  margin-top: 10px;
}

.inquiry {
  // min-width: 900px;
  background: #fff;
  padding: 10px 10px 0 10px;

  /deep/ .el-input--suffix .el-input__inner {
    height: 30px;
  }
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

/deep/.el-select__input {
  height: 30px !important;
}

.import {
  background: #fff;
  width: 100%;
  height: 40px;

  li {
    float: left;
    margin-right: 10px;
  }
}

.table {
  margin: 10px 0;
  // margin-bottom: 40px;

  /deep/.el-select .el-input .el-select__caret {
    color: #000;
    font-size: 14px;
    cursor: pointer;
  }

  /deep/.el-input__icon {
    height: 32px;
    line-height: 32px;
  }

  /deep/.el-input--suffix .el-input__inner {
    width: 140px;
    height: 32px;
    color: #000;
  }
  /deep/ .el-button {
    padding: 10px 13px;
  }
}

/deep/.el-table thead {
  color: #2d7edf;
  text-align: center;

  .cell {
    text-align: center;
  }
}

.operation {
  display: inline-block;
  padding: 0 3px;
  color: #2d7ddf;

  img {
    width: 20px;
    height: 20px;
  }
}
.operation:hover {
  cursor: pointer;
}
.delect {
  color: #ff5656;
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  /deep/.el-input--suffix .el-input__inner {
    height: 30px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
/deep/.el-dialog__header {
  background: #409eff;
  padding: 10px 20px 10px;
  .el-dialog__title {
    color: #fff;
  }
}
/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.exisit {
  //   width: 44px;
  height: 18px;
  line-height: 18px;
  //   background: #fff4f4;
  border-radius: 3px;
  //   border: 1px solid #ff5656;
  text-align: center;
  font-size: 10px;
  color: #ff5656;
  //   margin-left: 5px;
}

/deep/.el-checkbox {
  margin-bottom: 12px;
}
.checkbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
  display: inline-block;
  span {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }
  /deep/.el-input {
    width: 150px;
  }
  /deep/.el-textarea {
    width: 200px;
    display: inline-block;
    vertical-align: middle;
  }
}
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.haveTo {
  color: #3196ff;
}
</style>
